<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('mounted');
  // showNotify({ type: 'danger', message: '网络错误'});
});
</script>

<template>
  <div class="home-page-container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
  <van-tabbar route>
    <van-tabbar-item icon="cart-o" to="/home/sell">
      首页
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/home/school">
      校园
    </van-tabbar-item>
    <van-tabbar-item icon="smile-o" to="/home/learn">
      学习中心
    </van-tabbar-item>
    <van-tabbar-item icon="records-o" to="/home/tiku">
      题库
    </van-tabbar-item>
    <van-tabbar-item icon="manager-o" to="/home/mine">
      我的
    </van-tabbar-item>
  </van-tabbar>

  <!-- <div class="tabbar">
    <RouterLink to="/home/sell">首页</RouterLink>
    <RouterLink to="/home/school">校园</RouterLink>
    <RouterLink to="/home/learn">学习中心</RouterLink>
    <RouterLink to="/home/tiku">题库</RouterLink>
    <RouterLink to="/home/mine">我的</RouterLink>
  </div> -->
</template>


<style scoped>  
.home-page-container {
    font-size: 18px;
    font-weight: 700;
    background-color: rgb(104, 220, 151);
    height: calc(100% - 50px);
    width: 100%;
    overflow: hidden;
    
  }

  RouterView {
    height: 100%;
    width: 100%;
  }

  .tabbar {
    border-top: 1px solid #ccc;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .tabbar a {
    flex-grow: 1;
    text-align: center;
  }

  .link-active {
    color: red;
  }
</style>